<template>
  <div class="warp">
    <div class="box">
      <button>批量删除</button>
      <el-button type="text" @click="dialogFormVisible = true">新增</el-button>
      <el-dialog
        title="新增假期"
        :visible.sync="dialogFormVisible"
        width="40%"
        :append-to-body="true"
      >
        <el-form :model="form" >
          <el-form-item label="" :label-width="formLabelWidth">
            <el-select v-model="form.year" placeholder="请选择年份">
              <el-option label="2021" value="2021"></el-option>
              <el-option label="2020" value="2020"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="" :label-width="formLabelWidth">
            <el-input
              v-model="form.grouping"
              autocomplete="off"
              placeholder="请输入分组名称"
            ></el-input>
          </el-form-item>
          <el-form-item label="" :label-width="formLabelWidth">
            <el-input
              v-model="form.describe"
              autocomplete="off"
              placeholder="请输入描述"
            ></el-input>
          </el-form-item>
          <el-form-item label="" :label-width="formLabelWidth">
            <el-input
              v-model="form.day"
              autocomplete="off"
              placeholder="请输入可休假天数"
            ></el-input>
          </el-form-item>
          <el-form-item label="" :label-width="formLabelWidth">
            <el-select v-model="form.start" placeholder="请选择状态">
              <el-option label="病假" value="病假"></el-option>
              <el-option label="事假" value="事假"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button class="a" @click="dialogFormVisible = false"
            >取 消</el-button
          >
          <el-button type="primary" @click="dialogFormVisible = false"
            >确 定</el-button
          >
        </div>
      </el-dialog>
    </div>

    <el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column label="ID" width="120">
        <template slot-scope="scope">14444444444444411</template>
      </el-table-column>
      <el-table-column prop="year" label="年份" width="120">
        224444444444444444444422</el-table-column
      >
      <el-table-column prop="grouping" label="分组名称"
        >2222344444444444
      </el-table-column>
      <el-table-column prop="day" label="可休假数"
        >2224444444444444444444444444
      </el-table-column>
      <el-table-column prop="time" label="添加时间"
        >222244444444444444444444
      </el-table-column>
      <el-table-column prop="describe" label="描述"
        >22224444444444444444444
      </el-table-column>
      <el-table-column prop="enable" label="是否启用">
        <el-switch
          v-model="value"
          :width="num"
          active-color="#13ce66"
          inactive-color="#ff4949"
        >
        </el-switch>
      </el-table-column>
      <el-table-column prop="handle " label="操作">
        <span class="s">
          <span class="iconfont icon-htmal5icon16"></span>
          
            <el-button
              type="text"
              @click="dialogFormVisible = true"
              >编辑</el-button
            >
            <el-dialog
              title="新增假期"
              :visible.sync="this.dialogFormVisible"
              :dialogFormVisible="dialogFormVisible"
              @click="add"
              width="40%"
              :append-to-body="true"
            >
              <el-form :model="form">
                <el-form-item label="" :label-width="formLabelWidth">
                  <el-select v-model="form.year" placeholder="请选择年份">
                    <el-option label="2021" value="2021"></el-option>
                    <el-option label="2020" value="2020"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="" :label-width="formLabelWidth">
                  <el-input
                    v-model="form.grouping"
                    autocomplete="off"
                    placeholder="请输入分组名称"
                  ></el-input>
                </el-form-item>
                <el-form-item label="" :label-width="formLabelWidth">
                  <el-input
                    v-model="form.describe"
                    autocomplete="off"
                    placeholder="请输入描述"
                  ></el-input>
                </el-form-item>
                <el-form-item label="" :label-width="formLabelWidth">
                  <el-input
                    v-model="form.day"
                    autocomplete="off"
                    placeholder="请输入可休假天数"
                  ></el-input>
                </el-form-item>
                <el-form-item label="" :label-width="formLabelWidth">
                  <el-select v-model="form.start" placeholder="请选择状态">
                    <el-option label="病假" value="病假"></el-option>
                    <el-option label="事假" value="事假"></el-option>
                  </el-select>
                </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false"
                  >取 消</el-button
                >
                <el-button type="primary" @click="dialogFormVisible = false"
                  >确 定</el-button
                >
              </div>
            </el-dialog>
          </span>
        
        <span class="s">
          <span class="iconfont icon-lajitongshanchu"></span>
          <span>删除</span>
        </span>
      </el-table-column>
    </el-table>
    <div class="box1">
      <el-pagination background layout="prev, pager, next" :total="1000">
      </el-pagination
      ><el-dropdown>
        <el-button type="primary">
          10条/页<i class="el-icon-arrow-down el-icon--right"></i>
        </el-button>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>15条/页</el-dropdown-item>
          <el-dropdown-item>20条/页</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </div>
</template>

<script>
import "@/assets/font_78z62f2r6vf/iconfont.css";

export default {
  data() {
    return {
      tableData: [
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-08",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-06",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-07",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-07",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-07",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-07",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-07",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-07",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
      ],
      multipleSelection: [],
      value: true,
      num: 30,
      dialogFormVisible: false,   
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
      formLabelWidth: "30px",
      
    };
  },

  methods: {
    //   跳转新增页面
    add() {
      console.log(1332234);
      // this.$router.push("/shouye/kaoqin/add");
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleClick() {
      alert("button click");
    },
  },
};
</script>

<style lang="scss" scoped>
.warp {
  margin-top: 10px;
  background-color: #fff;
  padding: 20px;
}
.box {
  display: flex;
  justify-content: space-between;
  background-color: #fff;
  align-items: center;
  height: 50px;
  padding: 0 20px;
  button {
    width: 80px;
    height: 30px;
    border: none;
    border-radius: 5px;
    font-size: 12px;
  }
  button:nth-child(1) {
    background-color: #fff;
    color: #cccccc;
    border: 1px solid #ccc;
  }
  button:nth-child(2) {
    background-color: rgba(102, 100, 246, 1);
    color: #fff;
  }
}
.el-table-column {
  text-align: center;
}
.el-pagination {
  text-align: right;
  margin-top: 20px;
}
span {
  font-size: 13px;
}
.s {
  color: #409eff;
  margin: 0 3px;
  cursor: pointer;
}
::v-deep {
  .has-gutter {
    margin: 0 auto;
    font-size: 12px;
    color: #c0c4cc;
    background-color: rgba(245, 247, 250, 1);
  }
}
.el-dropdown {
  vertical-align: top;
}
.el-dropdown + .el-dropdown {
  margin-left: 15px;
}
.el-pagination[data-v-0b0b6061] {
  margin: 0;
}
.el-icon-arrow-down {
  font-size: 12px;
}
.box1 {
  margin: 10px 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.el-button {
  background-color: #fff;
  color: #333;
  height: 34px;
  line-height: normal;
  width: 75px;
  border: 1px solid;
  border-color: rgba(242, 242, 242, 1);
  padding: 0;
  span {
    font-size: 12px;
  }
}
.transition-box {
  margin-bottom: 10px;
  width: 200px;
  height: 100px;
  border-radius: 4px;
  background-color: #409eff;
  text-align: center;
  color: #fff;
  padding: 40px 20px;
  box-sizing: border-box;
  margin-right: 20px;
}
::v-deep {
  .el-input {
    width: 500px;
  }
}
</style>